* {
  /* 初始化 取消页面的内外边距 */
  padding: 0;
  margin: 0;
}
body {
  /* 弹性布局 让页面元素水平+垂直居中 */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 让页面始终占浏览器总高 */
  height: 100vh;
  background-color: #000;
  /* 视距 让元素看起来更有3D效果 */
  perspective: 900px;
}
section {
  /* 相对定位 */
  position: relative;
  /* width: 300px;
  height: 200px; */

  width: 233px;
  height: 291px;
  /* 鼠标放到元素上变成小手 */
  cursor: pointer;
  /* 让子元素保留其3D位置 */
  transform-style: preserve-3d;
  /* 动画 名称 时长 linear 是匀速 播放 infinite 是无限次播放 */
  animation: rotate 10s linear infinite;
}
section:hover {
  /* 鼠标放到元素上停止动画 */
  animation-play-state: paused;
}
section div {
  /* 绝对定位 */
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  /* 设置元素的倒影效果 below 是倒影效果在元素下方 15px 是元素和倒影的距离 后面的属性和背景渐变色是一个属性 设置了一个从下到上由背景透明色过渡到设置了不透明度的白色 */
  -webkit-box-reflect: below 15px -webkit-linear-gradient(transparent 10%, rgba(255, 255, 255, 0.3));
}

section div:nth-child(1) {
  transform: translateZ(300px);
  background-color: #c14c39;
}
section div:nth-child(2) {
  transform: rotateY(60deg) translateZ(300px);
  background-color: #6e9c72;
}
section div:nth-child(3) {
  transform: rotateY(120deg) translateZ(300px);
  background-color: #5e5f7a;
}
section div:nth-child(4) {
  transform: rotateY(180deg) translateZ(300px);
  background-color: #f5eb98;
}
section div:nth-child(5) {
  transform: rotateY(240deg) translateZ(300px);
  background-color: #50a3bc;
}
section div:nth-child(6) {
  transform: rotateY(300deg) translateZ(300px);
  background-color: #f9a99a;
}
section div:nth-child(7) {
  transform: rotateY(360deg) translateZ(300px);
  background-color: #f9a99a;
}

/* 先定义旋转动画 */
@keyframes rotate {
  0% {
    transform: rotateY(0);
  }
  100% {
    transform: rotateY(360deg);
  }
}
